<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">


			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.projectName' prop='projectName'>
					{{ isNullOrEmpty( operate.projectName ) }}
					<!-- <el-input v-model.trim='formInline.projectId' clearable :placeholder='prompt?.projectId' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.FacilitType' prop='FacilitType'>
					<!-- <dviceProuductTypeSelect v-model.trim='formInline.FacilitType' clearable
						:placeholder='prompt?.FacilitType' :style='{ width: "100%" }' 
						@change='changeFacilitType($event)' >

					</dviceProuductTypeSelect> -->
					<el-select @change='changeFacilitType($event)' v-model.trim='formInline.FacilitType' clearable
						:value-key="'FacilitType'" :placeholder='prompt?.FacilitType' :style='{ width: "100%" }'>
						<el-option :value-key="item.FacilitType" v-for="item in Facilitoptions" :key="item.FacilitType" :label="item.FacilitType"
							:value="item" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.facilitName' prop='facilitName'>
					<el-input :maxlength="30" :show-word-limit="true"
					v-model.trim='formInline.facilitName' clearable :placeholder='prompt?.facilitName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.groupId' prop='groupId'>
					<groupSelect v-model.trim='formInline.groupId' clearable :placeholder='prompt?.groupId'
						:style='{ width: "100%" }' @blur="formValidateField(ruleFormRef, 'groupId')">
					</groupSelect>
					<!-- <el-input v-model.trim='formInline.groupId' clearable :placeholder='prompt?.groupId' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<!-- {{ isNullOrEmpty( formInline.newORedit ) }} -->
				<el-form-item :label='titles?.position' prop='position'>
					<!-- <el-input v-model.trim='formInline.position' clearable :placeholder='prompt?.position' /> -->
					<el-radio-group @change="changePosition" :disabled="newORedit == 1" v-model="formInline.position">
						<el-radio v-for="item in ROOM_STATUS" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>

				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.position == 1">
				<el-form-item :label='titles?.buildingId' prop='buildingId'>
					<!-- <el-input v-model.trim='formInline.buildingId' clearable :placeholder='prompt?.buildingId' /> -->
					<!-- <building v-model.trim='formInline.buildingId' clearable :placeholder='prompt?.buildingId'
						:style='{ width: "100%" }'
						@event="eventFn">
                           
					</building> -->
					<el-select :disabled="newORedit == 1" @change="changeSelect" v-model.trim='formInline.buildingId'>
						<el-option v-for="item in options" :key="item.buildingId" :label="item.buildingName"
							:value="item.buildingId" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.position == 1">
				<el-form-item :label='titles?.drawingId' prop='drawingId'>
					<floors v-model.trim='formInline.drawingId' clearable :placeholder='prompt?.drawingId'
						:disabled="newORedit == 1" :buildingId='formInline.buildingId' :style='{ width: "100%" }'
						@change="images" @blur="formValidateField(ruleFormRef, 'drawingId')">
					</floors>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='12' :sm='12' v-if="formInline.position == 1">
				<el-form-item label='位置描述' prop=''>
					<div class="flex w-[100%]">
						<el-input :maxlength="30" :show-word-limit="true"
						class="mr-[20px]" v-model.trim='formInline.place' clearable
							:placeholder='prompt?.place' />
						<el-button @click="openPositionMark" class="" type="primary">图纸标记</el-button>
					</div>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.position == 2">
				<el-form-item :label='titles?.drawingPoint' prop=''>
					
					<el-button class="" type="primary" @click="openPositionMark">图纸标记</el-button>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='12' :sm='12' v-if="formInline.position == 2">
				<el-form-item label='位置描述' prop=''>
					<div class="flex w-[100%]">
						<el-input :maxlength="30" :show-word-limit="true"
						class="mr-[20px]" v-model.trim='formInline.place' clearable
							:placeholder='prompt?.place' />
						<el-button class="" type="primary" @click="edit">地图标记</el-button>
					</div>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.facilitSN' prop='facilitSN'>
					<el-input v-model.trim='formInline.facilitSN' clearable :placeholder='prompt?.facilitSN' />
				</el-form-item>
			</re-col>

			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.dutyUid' prop='dutyUid'>
					<authorizeuserproject :isid="1" :projectId="operate.checkedProject"  v-model.trim='formInline.dutyUid' clearable
						:placeholder='prompt?.dutyUid' :style='{ width: "100%" }' @blur="formValidateField(ruleFormRef, 'dutyUid')">
					</authorizeuserproject>
					<!-- <el-input v-model.trim='formInline.dutyUid' clearable :placeholder='prompt?.dutyUid' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.outDate' prop='outDate'>
					<el-date-picker class="pickerW" value-format="YYYY-MM-DD" v-model='formInline.outDate' type="date"
						:placeholder='prompt?.outDate' :style='{ width: "100%" }' />
					<!-- <el-input v-model.trim='formInline.outDate' clearable :placeholder='prompt?.outDate' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.expireDate' prop='expireDate'>
					<!-- <el-input v-model.trim='formInline.expireDate' clearable :placeholder='prompt?.expireDate' /> -->
					<el-date-picker class="pickerW" value-format="YYYY-MM-DD" v-model='formInline.expireDate'
						type="date" :placeholder='prompt?.expireDate' :style='{ width: "100%" }' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.fixDate' prop='fixDate'>
					<el-date-picker class="pickerW" value-format="YYYY-MM-DD" v-model='formInline.fixDate' type="date"
						:placeholder='prompt?.fixDate' :style='{ width: "100%" }' />
					<!-- <el-input v-model.trim='formInline.fixDate' clearable :placeholder='prompt?.fixDate' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.scrapDate' prop='scrapDate'>
					<el-date-picker class="pickerW" value-format="YYYY-MM-DD" v-model='formInline.scrapDate' type="date"
						:placeholder='prompt?.scrapDate' :style='{ width: "100%" }' />
					<!-- <el-input v-model.trim='formInline.scrapDate' clearable :placeholder='prompt?.scrapDate' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.mainteDate' prop='mainteDate'>
					<el-date-picker class="pickerW" value-format="YYYY-MM-DD" v-model='formInline.mainteDate'
						type="date" :placeholder='prompt?.mainteDate' :style='{ width: "100%" }' />
					<!-- <el-input v-model.trim='formInline.mainteDate' clearable :placeholder='prompt?.mainteDate' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.mainteCycle' prop='mainteCycle'>
					<el-input v-model.trim='formInline.mainteCycle' clearable class="input-with-select"
						:placeholder='prompt?.mainteCycle'>
						<template #append>
							<el-select style="width: 90px" v-model="formInline.cycleValue" placeholder="" size="large">
								<el-option v-for="item in cycleValueoptions" :key="item.value" :label="item.lable"
									:value="item.value" />
							</el-select>
						</template>
					</el-input>


					<!--  -->


				</el-form-item>
			</re-col>
			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.cycleValue' prop='cycleValue'>
					<el-input v-model.trim='formInline.cycleValue' clearable :placeholder='prompt?.cycleValue' />
				</el-form-item>
			</re-col> -->
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.inspectionMode' prop='inspectionMode'>
					<!-- <el-input v-model.trim='formInline.isInspection' clearable :placeholder='prompt?.isInspection' /> -->
					<el-radio-group v-model="formInline.inspectionMode">
						<el-radio v-for="item in ISINSPECTION_TYPE" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>

				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.inspectionMode == 2">
				<el-form-item :label='titles?.NFC' prop='NFC'>
					<el-input v-model.trim='formInline.NFC' clearable :placeholder='prompt?.NFC' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.inspectionMode == 3">
				<el-form-item :label='titles?.QR' prop='QR'>
					<el-input v-model.trim='formInline.QR' clearable :placeholder='prompt?.QR' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.inspectionMode !== 1">
				<el-form-item :label='titles?.inspect' prop='inspect'>
					<el-checkbox-group v-model="formInline.inspect">
						<el-checkbox v-for="item in SSSS" :value="item.value" :label="item.label">
						</el-checkbox>
					</el-checkbox-group>
					<!-- <el-input v-model.trim='formInline.inspect' clearable :placeholder='prompt?.inspect' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24' v-if="formInline.inspectionMode !== 1">
				<el-form-item :label='titles?.inspectContent' prop='inspectContent'>
					<el-input :maxlength="100" :show-word-limit="true"
					type="textarea" autosize v-model='formInline.inspectContent' clearable
						:placeholder='prompt?.inspectContent' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.facilitImg' prop='facilitImg'>
					<ReUpload v-model:files='formInline.facilitImg' :limit="100"></ReUpload>
					<!-- <el-input v-model.trim='formInline.facilitImg' clearable :placeholder='prompt?.facilitImg' /> -->
				</el-form-item>
			</re-col> </el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { addDialog } from "@/components/ReDialog";
import SjMap from "@/components/mapForm/map.vue"
import drawingPoints from "@/components/positionSelect/drawingPoints.vue";
// import { message } from "@/utils/message";
import { getProductNoIDTypeSelectList } from '@/api/operate/project-management/projectManagement/facility-management/index';
import ReUpload from '@/components/ReUpload/index.vue'
import authorizeuserproject from "@/components/select/authorizeuser/authorizeuserproject.vue";
import groupSelect from '@/components/select/facilityGrouping/facilityGrouping.vue'
import { ref, reactive } from "vue";
import { ROOM_STATUS, ISINSPECTION_TYPE, SSSS } from '@/constant/group'
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import { isArray } from "@pureadmin/utils";
import floors from "@/components/select/floors/floors.vue";
import { deviceDetection, debounce } from "@pureadmin/utils";
// import { allfacilitPoints } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import type { infoType } from '@/api/operate/project-management/projectManagement/facility-management/index';
import { usePageVariablesStoreHook, } from '@/store/modules/pageVariables'
import { getbuildSelectList } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import { usePoints } from "@/common/points";
// import { getInfo, } from '@/api/operate/project-management/project-management/drawing-management/index';
import { getInfo as settingInfo } from "@/api/operate/project-management/projectManagement/setting";
import { getInfo as drawingInfo, } from '@/api/operate/project-management/project-management/drawing-management/index';
import { formValidateField } from '@/utils/functions'

const Facilitoptions = ref([])
const options = ref([])
const operate = usePageVariablesStoreHook().getOperate()
const drawingPointsRefs = ref()
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	isEdit: boolean,
	showBuildingId: any,
	drawingId: any,
	newORedit: any,
	bgImg: any,
	originMarker: Array|Object,
}
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	originMarker: () => {},
	isLoading: false,
	isEdit: false,
	showBuildingId: '',
	drawingId: '',
	newORedit: null,
	bgImg: null
});
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
	center: [],
	drawingPoint: {}
})
const showInfo = ref();
const formRef = ref();
const cycleValueoptions = [{
	value: 1,
	lable: '周'
}, {
	value: 2,
	lable: '月'
}, {
	value: 3,
	lable: '年'
}]

// console.log("获取props", props);

const formRules = reactive(<FormRules>{
	// id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	// projectId: [{ required: true, message: prompt?.projectId, trigger: 'blur' },],
	facilitName: [{ required: true, message: prompt?.facilitName, trigger: 'blur' },],
	groupId: [{ required: true, message: prompt?.groupId, trigger: 'blur' },],
	position: [{ required: true, message: prompt?.position, trigger: 'blur' },],
	buildingId: [{ required: true, message: prompt?.buildingId, trigger: 'blur' },],
	drawingId: [{ required: true, message: prompt?.drawingId, trigger: 'blur' },],
	drawingPoin: [{ required: true, message: prompt?.drawingPoint, trigger: 'blur' },],
	markPoint: [{ required: true, message: prompt?.markPoint, trigger: 'blur' },],
	facilitSN: [{ required: true, message: prompt?.facilitSN, trigger: 'blur' },],
	faciltType: [{ required: true, message: prompt?.faciltType, trigger: 'blur' },],
	dutyUid: [{ required: true, message: prompt?.dutyUid, trigger: 'blur' },],
	// outDate: [{ required: true, message: prompt?.outDate, trigger: 'blur' },],
	// expireDate: [{ required: true, message: prompt?.expireDate, trigger: 'blur' },],
	// fixDate: [{ required: true, message: prompt?.fixDate, trigger: 'blur' },],
	// scrapDate: [{ required: true, message: prompt?.scrapDate, trigger: 'blur' },],
	// mainteDate: [{ required: true, message: prompt?.mainteDate, trigger: 'blur' },],
	// mainteCycle: [{ required: true, message: prompt?.mainteCycle, trigger: 'blur' },],
	// cycleValue: [{ required: true, message: prompt?.cycleValue, trigger: 'blur' },],
	// isInspection: [{ required: true, message: prompt?.isInspection, trigger: 'blur' },],
	// NFC: [{ required: true, message: prompt?.NFC, trigger: 'blur' },],
	// inspect: [{ required: true, message: prompt?.inspect, trigger: 'blur' },],
	// inspectContent: [{ required: true, message: prompt?.inspectContent, trigger: 'blur' },],
	// facilitImg: [{ required: true, message: prompt?.facilitImg, trigger: 'blur' },],
});
const ruleFormRef = ref();
onMounted(() => {
	setTimeout(() => {
		if(props.formInline.inspect == null){
		props.formInline.inspect  = []
	}
	}, 500);
	
	setTimeout(() => {
		images()
	}, 300);
	getbuildSelectList().then(res => {
		options.value = res.result;
	})
	getFacilitoptions()
})
const getFacilitoptions = () => {
	getProductNoIDTypeSelectList().then(res => {
		Facilitoptions.value = res.result
		// console.log("设施类型", res);
	})
}
const changeFacilitType = (e) => {
	// console.log('dianj记', e);
	props.formInline.FacilitType =e.FacilitType
	props.formInline.FacilitIcon = e.FacilitIcon
}

const changeSelect = (e) => {
	props.formInline.drawingId = null
}
const changePosition = () => {

	props.formInline.drawingId = null
	props.formInline.buildingId = null

	images()
}
const images = () => {
	if (props.formInline.drawingId && props.formInline.position == 1) {
		getImg()
	} else {
		getSettinginfo()
	}
}
const getImg = () => {
	//如果是室内
	drawingInfo({ id: props.formInline.drawingId }).then(res => {
		if (res.code == 200) {
			bgImg.value = res.result.img
			//  console.log("huoss",bgImg.value,res);

		}
	})
}
const getSettinginfo = () => {
	settingInfo().then(res => {
		// console.log("货物设置 projectPlan",res);
		if (res.code == 200) {
			bgImg.value = res.result.projectPlan
		}
	})
}

watch(() => props.formInline.drawingId, () => {
	if (props.formInline.drawingId) {
		getImg()
	}else{
		getSettinginfo()
	}
})
//打开地图标记弹框
const openPosition = () => {
	let bg = ref()
	let bounds = ref()
	settingInfo().then(res => {
	
			 bg.value = res.result.projectPlan
			 bounds.value = res.result.bounds
	
	formState.center = [props.formInline.markPoint.lng, props.formInline.markPoint.lat]
	addDialog({
		title: '地图标记',
		width: "800px",
		draggable: true,
		props: {
			center: formState.center,
			isEdit: true,
			showCreatePoly: false,
			labelMarkers: labelMarkers.value,
			image:bg.value,
			bounds: bounds.value
			// area:formState.area
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,
		open: ({ options, index }) => {
			//获取已经标记过的点位
			usePoints("facilit").getMapPoints(operate.checkedProject, true, formState.center).then(res => {
				formRef.value.setLabelMarkers(res)
			})
		},
		contentRenderer: () => h(SjMap, {
			ref: formRef,
			"onUpdate:center": (val) => {
				formState.center = val
			},
		}),
		beforeSure: (done, { options }) => {
			function chores() {
				props.formInline.markPoint.lng = formState.center[0]
				props.formInline.markPoint.lat = formState.center[1]


				done(); // 关闭弹框

			}

			chores()
		}
	})
	
})
}

//打开地图组件
// 编辑
const edit = () => {
	showInfo.value = {}
	openPosition()
}
const bgImg = ref()
//图纸标记
const openPositionMark = () => {


	let changeMarker = []
	const dp = props.formInline.drawingPoint
	// console.log("dp", dp);

	if (Object.keys(dp).length > 2 && dp.lat !== '' && dp.lng !== '') {
		changeMarker = [dp]
		// console.log("dpa", changeMarker);
	}
	addDialog({
		title: `图纸标点`,
		width: "1100px",
		draggable: true,
		props: {
			formInline: props.formInline,
			isShowPopup: false,
			changeMarker: changeMarker, //添加，修改的标点
			markerArr: [], //已经添加过的标点
			bgImg: bgImg.value,
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,
		contentRenderer: () => h(drawingPoints, {
			ref: drawingPointsRefs,
			"onUpdate:changeMarker": (val) => {
				if (isArray(val) && val.length > 0) {
					formState.drawingPoint = val[0]
				}
			}
		}),
		open: ({ options, index }) => {
			//获取已经标记过的点位
			usePoints("facilit").getMarkerPoints(true, props.originMarker,
			 { projectId: operate.checkedProject, 
				drawingId: props.formInline.position == 1 ? props.formInline.drawingId : '', buildingId: props.formInline.position == 1 ? props.formInline.buildingId : '' }).then(res => {
				drawingPointsRefs.value.setFixedMarkers(res)
			})
		},
		beforeSure(done, { options, index }) {
			props.formInline.drawingPoint = formState.drawingPoint
			console.log('点击确认', props.formInline.drawingPoint, formState.drawingPoint);

			done();// 关闭弹框

		},
	});
}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style scoped>
.pickerW {
	width: 100% !important;
}

.input-with-select .el-input-group__prepend {
	background-color: var(--el-fill-color-blank);
}
</style>